import { getConstantValue } from '@/utils/common';
import { View, Text, Swiper, SwiperItem } from '@tarojs/components';
import React from 'react';
import ZbSeparator from '../common/Separator';
import { QUESTION_TYPE, QUESTION_TYPE_KEY } from './constants';
import ZbCheckboxAnswer from './core/Checkbox';
import ZbRadioAnswer from './core/Radio';

interface IQuestionItem {
  type: 'radio' | 'checkbox' | string;
  title: string;
  answer: { key: string; value: string }[];
  rightAnswer?: { key: string[]; analyze: any };
}

interface IZbQuestionProps {
  topic: string;
  list: IQuestionItem[];
}

// const MIN_DISTANCE = 100;
// const MAX_INTERVAL = 10;

const ZbQuestion = (props: IZbQuestionProps) => {
  const { topic, list } = props;

  const [curQuestion, setCurQuestion] = React.useState<number>(0);

  const onSwiperChange = (e: any) => {
    setCurQuestion(e.detail.current);
  };

  return (
    <View className="h-screen">
      {/* 什么类型的题目 */}
      <View className="w-full text-sm flex flex-row">
        <View className="flex-1 p-1">
          <Text className="text-green-600">{topic}</Text>
        </View>
        <View className="flex-1 text-right p-1">
          <Text className="text-green-600">
            {curQuestion + 1}/{list.length}
          </Text>
        </View>
      </View>
      <ZbSeparator height={1} bgColor="#ececec" />
      <Swiper className="w-full h-screen" current={curQuestion} onChange={onSwiperChange}>
        {list.map((it: IQuestionItem, idx: number) => (
          <SwiperItem key={idx}>
            <View className="p-3 text-green-900">
              {/* 题目的内容 */}
              <View className="text-lg pb-2">
                <Text className="text-purple-600 pr-10px">({getConstantValue(QUESTION_TYPE, it.type)})</Text>
                {it.title}
              </View>
              {/* 题目的答案 */}
              {it.type === QUESTION_TYPE_KEY.RADIO && <ZbRadioAnswer item={it.answer} />}
              {it.type === QUESTION_TYPE_KEY.CHECKBOX && <ZbCheckboxAnswer item={it.answer} />}
            </View>
          </SwiperItem>
        ))}
      </Swiper>
    </View>
  );
};

export default ZbQuestion;
